<template>
  <el-scrollbar height="100vh">
    <div class="container">
      <el-affix :offset="1">
        <h1 class="title">同步两个地图</h1>
      </el-affix>
      <div id="map1" class="map-x" ref="map1Box"></div>
      <dl>
        <p>注意：</p>
        <dt>两个地图使用同一个view，所以在移动、缩放、旋转等操作都是同步的。</dt>
        <dt>按住shift，鼠标在地图上选区，可以放大选区。</dt>
        <dt>按住alt+shift，鼠标可以在地图上拖拽，进行旋转。</dt>
      </dl>
      <div id="map2" class="map-x" ref="map2Box"></div>
      <div class="codestyle"><Code /></div>
    </div>
  </el-scrollbar>
</template>
<script>
import { onMounted, reactive, ref, toRefs } from 'vue-demi'
import Code from './code.vue'
import 'ol/ol.css'
import { Map, View } from 'ol'
import Tile from 'ol/layer/Tile'
import BingMaps from 'ol/source/BingMaps'
import XYZ from 'ol/source/XYZ' // 引入XYZ地图格式
export default {
  setup () {
    const state = reactive({
      map1: null,
      map2: null,
      map1Box: ref(null),
      map2Box: ref(null),
      mapView: new View({
        projection: 'EPSG:4326',
        center: [116.41400, 39.91500],
        zoom: 7
      }),
      layer1: new Tile({
        title: 'bigMap',
        source: new BingMaps({
          key: 'AiZrfxUNMRpOOlCpcMkBPxMUSKOEzqGeJTcVKUrXBsUdQDXutUBFN3-GnMNSlso-',
          imagerySet: 'Aerial'
        })
      }),
      layer2: new Tile({
        source: new XYZ({
          url: 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
        })
      })
    })

    const init = () => {
      state.map1 = new Map({
        target: state.map1Box,
        layers: [state.layer1],
        view: state.mapView
      })

      state.map2 = new Map({
        target: state.map2Box,
        layers: [state.layer2],
        view: state.mapView
      })
    }

    onMounted(() => {
      init()
    })
    return {
      ...toRefs(state)
    }
  },
  components: {
    Code
  }
}
</script>
<style lang="scss" scoped>
@import '../../css/main.scss';
</style>
